// App.tsx
import { Suspense } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import { routes } from './routes'
import { RouteItem } from './type/route'

function renderRoutes(routes: RouteItem[]) {
  return routes.map((route) => {
    if (route.redirect) {
      return <Route key={route.path} path={route.path} element={<Navigate to={route.redirect} />} />
    }
    return (
      <Route key={route.path} path={route.path} element={route.element}>
        {route.children?.map(child => (
          <Route
            key={child.path}
            path={child.path}
            element={child.element}
          />
        ))}
      </Route>
    )
  })
}

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        {renderRoutes(routes)}
        <Route path="*" element={<Navigate to="/admin" replace />} />
      </Routes>
    </Suspense>
  )
}